<template>
  <div class="table-container">
    <div class="table-title">
      <span>新媒体</span>
    </div>
    <div class="wrap-table flex flex-col pl-14px pr-20px pt-12px">
      <!-- <div class="flex">
        <div class="w-20%">姓名</div>
        <div class="w-15%">学历</div>
        <div class="w-30%">公司名称</div>
        <div class="w-15%">岗位</div>
      </div> -->
      <table class="custom-table">
        <thead>
          <tr>
            <th>
              <div>姓名</div>
            </th>
            <th>
              <div>学历</div>
            </th>
            <th>
              <div>公司名称</div>
            </th>
            <th>
              <div>岗位</div>
            </th>
            <th>
              <div>薪资</div>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in tableData" :key="index">
            <td>
              <div>{{ item.name }}</div>
            </td>
            <td>
              <div>{{ item.education }}</div>
            </td>
            <td>
              <div>{{ item.company }}</div>
            </td>
            <td>
              <div>{{ item.position }}</div>
            </td>
            <td class="highlight-salary">
              <div>{{ item.salary }}</div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script lang="ts" setup>
// const headers = [
//   '姓名',
//   '学历',
//   '公司名称',
//   '岗位',
//   '薪资',
// ]
const tableData = [
  { name: '张同学', education: '专科', company: '北京**文化传媒有限公司', position: '直播运营', salary: 13000 },
  { name: '刘同学', education: '专科', company: '北京**佳商贸有限公司', position: '电商运营', salary: 14000 },
  { name: '冯同学', education: '专科', company: '**欣服装有限公司', position: '直播助播', salary: 7000 },
  { name: '马同学', education: '专科', company: '**盈金融公司', position: '客户运营', salary: 12000 },
  { name: '寇同学', education: '专科', company: '北京**商贸有限公司', position: '小红书运营', salary: 9500 },
  // { name: '仇同学', education: '专科', company: '上海**贸易有限公司', position: '跨境电商', salary: 11000 },
];
</script>

<style scoped>
.table-container {
  width: 550px;
  /* height: 356px; */
}
.wrap-table {
  border: 1px solid #3878e9;
  border-top: 0 none;
  overflow: hidden;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  height: 295px;
}

.table-title {
  @apply rounded-tl-10px rounded-tr-10px text-center text-white py-13px;
  background: linear-gradient(-90deg, #3777e9, #8db6fc);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 2px;
  span {
    box-shadow: 0 0 13px 0 #147eff;
  }
}

.custom-table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
  overflow: hidden;
  thead tr th {
    /* padding-top: 12px; */
    margin-bottom: 3px;
    @apply px-0 pb-0;
    div {
      padding-top: 6px;
      padding-bottom: 6px;
      @apply bg-#EFF5FF font-700 text-16px text-#3878E9;
    }
    &:nth-child(1) {
      padding-left: 14px;
      div {
        @apply rounded-l-12px bg-#EFF5FF;
      }
    }
    &:nth-child(4) {
      div {
        background: linear-gradient(90deg, #e3edfe, #e4edfe);
      }
    }
    &:nth-child(5) {
      padding-right: 14px;
      div {
        @apply rounded-r-12px bg-#EFF5FF;
      }
    }
  }
  tbody tr {
    position: relative;
    @apply text-#333 font-400 text-16px;
    &:last-child {
      td {
        &::after {
          content: none;
        }
      }
      &::after {
        content: none;
      }
    }
    &::after {
      content: '';
      @apply h-1px absolute block left-14px right-14px bg-#E0EAFC bottom-1px;
    }

    &:nth-child(1) {
      td {
        &:nth-child(4) {
          background: linear-gradient(90deg, #e3edfe, #e4edfe);
          @apply text-#000;
        }
      }
    }
    &:nth-child(2) {
      td {
        &:nth-child(4) {
          background: linear-gradient(90deg, #e3edfe, #e4edfe);
          @apply text-#000;
        }
      }
    }
    &:nth-child(3) {
      td {
        &:nth-child(4) {
          background: linear-gradient(90deg, #e3edfe, #e4edfe);
          @apply text-#000;
        }
      }
    }
    &:nth-child(4) {
      td {
        &:nth-child(4) {
          background: linear-gradient(90deg, #e3edfe, #e4edfe);
          @apply text-#000;
        }
      }
    }
    &:nth-child(5) {
      td {
        &:nth-child(4) {
          background: linear-gradient(90deg, #e3edfe, #e4edfe);
          @apply text-#000;
        }
      }
    }
    &:nth-child(6) {
      td {
        &:nth-child(4) {
          background: linear-gradient(90deg, #e3edfe, #e4edfe);
          @apply text-#000;
        }
      }
    }
  }

  tbody tr td {
    @apply py-12px relative px-0;

    &:nth-child(1) {
      padding-left: 14px;
    }

    &:nth-child(5) {
      padding-right: 14px;
    }
  }
}

.highlight-salary {
  color: #f60505;
  font-weight: bold;
}
</style>
